<template>
  <div class="recommend">
    <div class="ret">
      <a
        v-for="(item, index) in $route.query"
        :key="index"
        @click="xiyou(index)"
      >
        <h3 :class="{ colos: index === myindex }">{{ item.name }}</h3>
      </a>

        <router-view />
 
    </div>


    <button @click="xiyou(Math.floor(Math.random() * arr.length))">
      点击随机
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myindex: null,
      arr: [
        '/home/recommend/xiyou',
        '/home/recommend/hong',
        '/home/recommend/shui',
      ],
    }
  },
  methods: {
    xiyou(url) {
      this.myindex = url
      this.$router.push({
        path: this.arr[url],
        query: [
          { name: '百年孤独' },
          { name: '简 ● 爱' },
          { name: '福尔摩斯探案集' },
        ],
      })
    },
  },
}
</script>

<style>
.ret {
  display: flex;
  height: 450px;
  background-color: rgb(238, 237, 237);
}
h3 {
  margin: 5px 10px;
  color: rgba(143, 143, 143, 0.993);
}
.colos {
  color: skyblue;
}
</style>
